<template>
  <div class="page-addFilm">
    <a-tabs
      v-model:activeKey="activeKey"
      :tabBarGutter="39"
      :tabBarStyle="{ borderBottom: 'none' }"
      @change="handleChange"
    >
      <a-tab-pane key="1" tab="基础信息" force-render> <basic-info ref="basicDataRef" /> </a-tab-pane>
      <a-tab-pane key="2" tab="扩展信息" force-render>
        <extend-info />
      </a-tab-pane>
    </a-tabs>
    <div class="bottom-button">
      <a-button type="primary" @click="saveFilm">保存影片</a-button>
      <a-button @click="() => $router.back()">返回</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import BasicInfo from './components/BasicInfo.vue'
import ExtendInfo from './components/ExtendInfo.vue'
const activeKey = ref('1')
const basicDataRef = ref()
const handleChange = (key: string) => {
  console.log('key: ', key)
}
const saveFilm = () => {
  basicDataRef.value.validateFunc()
}
</script>

<style lang="less" scoped>
.page-addFilm {
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #0083ff;
    text-shadow: 0 0 0.25px currentcolor;
  }

  :deep(ant-tabs-nav-wrap) {
    width: auto;
    border-bottom: 1px solid #fff;
  }

  :deep(.ant-tabs-nav) {
    width: 152px;
  }

  :deep(ant-tabs-nav-list) {
    border-bottom: 1px solid #f1f1f1;
  }
}

.bottom-button {
  display: flex;

  .ant-btn {
    margin: 24px 16px 0 0;
  }
}
</style>
